<template>
	<text class="taobaoIconfont" :style="styleObj" @tap="handleTap">{{iconfont}}</text>
</template>

<script>
	const iconfonts = require('./iconfont.json')
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
			size: {
				type: [Number, String],
				default: 27
			},
			color: {
				type: String,
				default: ''
			},
			weight: {
				type: String,
				default: 'none'
			},
			type: {
				type: String,
				default: 'text'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			iconfont () {
				const list = iconfonts.glyphs
				const name = this.name.replace('&#x', '').replace(';', '')
				const index = list.findIndex(item => item.name == name || item.unicode == name)
				return index > -1 ? String.fromCodePoint(list[index].unicode_decimal) : ''
			},
			styleObj () {
				return this.color ? {'font-size': this.pixelunit(this.size), 'font-weight': this.weight, color: this.color} : {'font-size': this.pixelunit(this.size), 'font-weight': this.weight}
			}
		},
		methods: {
			pixelunit (size) {
				const text = size.toString()
				return text.indexOf('px') > -1 ? text : text + 'rpx'
			},
			handleTap (e) {
				if ( this.disabled ) return
				this.$emit('click', e)
			}
		}
	}
</script>

<style>
</style>
